<template>
  <div>
    <div class="top-logo">
      <img src="./images/mylogo.png" alt="" />
    </div>
    <div class="container" :class="isLogin ? 'islogin' : 'nologin'">
      <!-- 已登录 -->
      <div class="card" v-if="isLogin">
        <div class="card-user">
          <div class="user-pic">
            <img src="./images/pic.jpeg" alt="" />
          </div>
          <div class="user-info">
            <div class="user-name">{{ username }}</div>
            <div class="bar">初级茶粉</div>
          </div>
          <div class="QR-code" @click="diaLogCode">
            <span class="iconfont icon-erweima1688"></span>
            <span class="code-text">会员码</span>
          </div>
        </div>
        <div class="card-coupon">
          <div
            class="branch"
            @click="$router.push('/integralshop/integraldetailed')"
          >
            <span class="num">{{ integral }}</span>
            <span class="text">积分</span>
          </div>
          <div class="coupon" @click="$router.push('/voucher')">
            <span class="num">0</span>
            <span class="text">优惠券</span>
          </div>
        </div>
      </div>
      <!-- 未登录 -->
      <div class="card-go-login" v-else @click="goLogin">
        <img src="./images/nologin.png" alt="" />
        <div class="text">
          <span class="hi">HI 欢迎新朋友～</span>
          <span class="ad">加入会员 尊享更多权益</span>
        </div>
        <div class="btn-login">注册/登录</div>
      </div>
      <div class="card2" @click="line">
        <img src="./images/line.png" alt="" />
      </div>
      <div class="card3">
        <ul class="menu">
          <li
            class="menu-item"
            v-for="(item, index) in menuList"
            @click="clickItem(item)"
          >
            <span class="iconfont icon" :class="item.icon"></span>
            <span class="title">{{ item.title }}</span>
          </li>
          <li class="menu-item" @click="goSocketChat">
            <van-icon size="28" color="#143ea9" name="service-o" />
            <span class="title">客服聊天</span>
          </li>
        </ul>
      </div>
      <div class="card4">
        <img src="./images/ad.png" alt="" />
      </div>
    </div>
    <Tabbar />
    <!-- 登录弹窗 -->
    <van-popup
      v-model="showLogin"
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <Login @closeLogin="closeLoginDialog" />
    </van-popup>
    <!-- 二维码遮罩层 -->
    <van-overlay :show="diaLogCodeShow" @click="diaLogCodeShow = false">
      <div class="wrapper">
        <div class="block">
            <img class="code-img" src="./images/wxCode.jpeg">
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Toast } from "vant";
import Login from "@/views/Login";
import { mapGetters } from "vuex";
export default {
  components: {
    Login,
  },
  data() {
    return {
      menuList: [
        {
          herf: "/integralshop",
          title: "积分商城",
          icon: "icon-jifenshangcheng",
        },
        {
          herf: "/center/giftcard",
          title: "礼品卡",
          icon: "icon-liwulipinjiangpin-xianxing",
        },
        { herf: "/giftexchange/discount", title: "礼券兑换", icon: "icon-9" },
        { herf: "", title: "社群福利", icon: "icon-fuliquan" },
        {
          herf: "/center/address",
          title: "收货地址",
          icon: "icon-weibiaoti2fuzhi08",
        },
        {
          herf: "/center/selfInfo",
          title: "个人资料",
          icon: "icon-gerenziliao",
        },
      ],
      isLogin: localStorage.getItem("userInfo"),
      showLogin: false,
      diaLogCodeShow: false,
    };
  },
  methods: {
    line() {
      Toast("敬请期待～");
    },
    goLogin() {
      this.showLogin = true;
    },
    closeLoginDialog() {
      this.showLogin = false;
      this.isLogin = true;
    },
    async clickItem(item) {
      if (item.title === "社群福利") {
        Toast("敬请期待～");
        return false;
      }
      if (this.isLogin) {
        this.$router.push(item.herf).catch(() => {});
      } else {
        Toast("请先登录哦～");
      }
    },
    toVoucher() {
      this.$router.push("/voucher");
    },
    diaLogCode() {
      this.diaLogCodeShow = true;
    },
    goSocketChat() {
      this.$router.push('/center/socketchat');
    }
  },
  computed: {
    ...mapGetters('user',['integral','username'])
  },
  mounted() {
    let id = this.$store.state.login.userInfo.id;
    this.$store.dispatch('user/asyncAllSetUserInfo', id);
  }
};
</script>

<style lang="less" scoped>
.code-img {
    width: 100%;
    height: 100%;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 150px;
    height: 150px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 5px;
  }
.top-logo {
  width: 100%;
  height: 170px;

  img {
    width: 100%;
    height: 100%;
  }
}
.islogin {
  padding: 170px 5% 5%;
}
.nologin {
  padding: 90px 5% 5%;
}

.container {
  position: relative;
  margin-bottom: 50px;
  background-color: #f8f8f8;

  .card-go-login {
    width: 90%;
    height: 90px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: absolute;
    padding: 0 15px;
    box-sizing: border-box;
    top: -10px;
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      margin-right: 15px;
    }
    .text {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 50px;
      .hi {
        font-size: 15px;
        font-weight: 550;
      }
      .ad {
        font-size: 12px;
      }
    }
    .btn-login {
      width: 85px;
      height: 30px;
      box-sizing: border-box;
      border: 1px solid #143ea9;
      text-align: center;
      line-height: 28px;
      border-radius: 15px;
      font-size: 13px;
      color: #143ea9;
      font-weight: 400;
    }
  }

  .card {
    width: 90%;
    height: 170px;
    background-color: #fff;
    position: absolute;
    top: -10px;
    border-radius: 15px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;

    .card-user {
      display: flex;
      margin-bottom: 10px;

      .user-pic {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;

        img {
          width: 100%;
          height: 1005;
        }
      }

      .user-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .user-name {
          font-weight: 500;
        }

        .bar {
          width: 60px;
          height: 20px;
          background-color: #f7b844;
          font-size: 10px;
          padding: 1px 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 15px;
        }
      }

      .QR-code {
        width: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #151616;

        .icon-erweima1688 {
          font-size: 25px;
          font-weight: 500;
        }

        .code-text {
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }

    .card-coupon {
      background-color: #fff;
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .branch,
      .coupon {
        display: flex;
        width: 50%;
        flex-direction: column;
        align-items: center;
        .num {
          font-size: 25px;
          margin-bottom: 10px;
        }
        .text {
          font-size: 14px;
          color: #646566;
        }
      }
      .branch {
        border-right: 1px solid #eeecec;
      }
    }
  }

  .card2 {
    width: 100%;
    height: 220px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    img {
      width: 100%;
    }
  }

  .card3 {
    width: 100%;
    height: 160px;
    background-color: #fff;
    border-radius: 15px;
    margin-top: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    .menu {
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      height: 100%;

      .menu-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon {
          font-size: 30px;
          color: #143ea9;
          font-weight: 400;
        }

        .title {
          font-size: 13px;
          color: #646566;
          margin-top: 5px;
        }
      }
    }
  }

  .card4 {
    width: 100%;
    height: 130px;
    border-radius: 15px;
    margin-top: 10px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
